﻿var model,
    router,
    imagePlaceHolder = { image_url: "", calculatedWidth: "400px" },
    popularQuery = { url: '/photos', settings: { feature: 'popular', page: 1, image_size: 1, rpp: 50 } };



var photoDate=receiptJs.loadPageData;



var photos = new kendo.data.DataSource({
    transport: {
        read: function(options) {
			
                options.success(photoDate);
           
        }
    }
});

var index = 0;
var arrImages = photoDate;

$(document).on("touchmove", false);

model = kendo.observable({
    photos: photos,
    current: null,
    currentPhoto: imagePlaceHolder,
    query: "",
    showDetails: false,
    slideShow: true,
    currentQuery: null,

    show: function(photoID) {
        this.set("currentPhoto", imagePlaceHolder);
        this.set("current", photoID);

           for(var a in photoDate){
		     if(photoDate[a].id==photoID){
				var photo = photoDate[a];

				imagePlaceHolder.calculatedWidth = photo.calculatedWidth = (($("#image-inner-wrap").find(".image").height() / photo.height) * photo.width) + "px";
				photo.categoryName = photo.category ? categories[photo.category] : "";
				photo.backgroundPhoto = photo.image_url ? "url('" + photo.image_url + "')" : "";
				model.set("currentPhoto", photo);
				break;
			 }
		   }
    },

    thumbHref: function(item) {
        var currentQuery = this.get("currentQuery");
        if (currentQuery) {
            return "#search/" + encodeURIComponent(currentQuery) + "/photos/" + item.get("id");
        } else {
            return "#photos/" + item.get("id");
        }
    },

    thumbClass: function(item) {
        return item.get("id") === this.get("current") ? "selected" : "";
    },

    performSearch: function(e) {
        e.preventDefault();

        var query = this.get("query");

        if (query) {
            router.navigate("search/" + encodeURIComponent(query));
        } else {
            router.navigate("");
        }
    },


    searchFor: function(query, showFirst) {
        var currentQuery = this.get("currentQuery");
        if (currentQuery !== query) {
            this.set("currentQuery", query);
            this.set("query", query);
            if (query) {
                photos.read({ url: '/photos/search', settings: { term: query, page: 1, image_size: 1, rpp: 50 } });
            } else {
                photos.read(popularQuery);
            }
            if (showFirst) {
                model.show(this.photos._data[0].id);
            }
            
        }
    },

    scrollRight: function() {
        var width = $("#photo-thumbs").width();
        $("#photo-thumbs").animate({ scrollLeft: "+=" + width }, 500);
    },

    scrollLeft: function() {
        var width = $("#photo-thumbs").width();
        $("#photo-thumbs").animate({ scrollLeft: "-=" + width }, 500);
    },
    
    moveNext: function() {
        var currentItem = photos.get(model.currentPhoto.id);
        var currentItemIndex = photos.data().indexOf(currentItem);

        if (currentItemIndex === -1) {
            return;
        }
        if (currentItemIndex == photos.data().length - 1) {
            currentItemIndex = -1;
        }

        var nextItem = photos.at(currentItemIndex + 1);
        if (model.currentQuery) {
            router.navigate("search/" + encodeURIComponent(model.currentQuery) + "/photos/" + nextItem.id);
        } else {
            router.navigate("photos/" + nextItem.id);
        }
    }
});

var main = new kendo.View("main", { model: model });

router = new kendo.Router({
    init: function() {
        main.render("#root");
    }
});

router.route("/", function(id) {
    model.searchFor("", true);
});

router.route("search/:query/photos/:id", function(query, id) {
    var b = false;
    for( var i = 0;i < this.photoDate.length;i++){
    	if(this.photoDate[i].id == id){
    		b = true;
    		break;
    	}
    }
    if(b){
    	model.show(id);
    	model.searchFor(query, false);
    }else{
    	model.searchFor("", true);
    }
});

router.route("search/:query", function(query) {
    model.searchFor(query, true);
});
/**
 *判断数据条数
 *比较ID是否有相同值
 *如果相同，则b为true
 *若b为true则数据中存在该ID，则传false，不用选择第一个数据， 
 */
router.route("photos/:id", function(id) {
    var b = false;
    for( var i = 0;i < this.photoDate.length;i++){
    	if(this.photoDate[i].id == id){
    		b = true;	
    		break;
    	}
    }
    if(b){
    	model.show(id);
    	model.searchFor("", false);
    }else{
    	model.searchFor("", true);
    }
});

$(function() {
      router.start();
});